{
	template:`
    <a-row>
        <a-col :span="4">
            <div class="padding-left padding-bottom">
                <div ref="typeDiv" style="overflow-y:auto;overflow-x:hidden;margin:10px 0;padding-right:8px;">
                    <a-divider orientation="left" >商品分类</a-divider>
                    <a-row v-for="item in allType" type="flex" style="padding-bottom:10px;" justify="end">
                        <a-col flex="auto">
                            <a-typography-text v-if="storeTypeOid==item.oid" strong>{{item.name}}</a-typography-text>
                            <a-typography-link v-else @click="showTypeGroup(item.oid)">{{item.name}}</a-typography-link>
                        </a-col>
                        <a-col v-if="oper=='edit'">
                            <a-space>
                                <a-button type="text" size="small" @click="modType(item.oid);"><m-icon name="icon-icon-177"></m-icon>修改</a-button>
                            </a-space>
                        </a-col>
                    </a-row>
                </div>
                <a-row :gutter="10" style="margin-top:10px;">
                    <a-col v-if="oper=='edit'" :span="12">
                        <a-button @click="addType()" type="primary" block>添加分类</a-button>
                    </a-col>
                    <a-col :span="oper=='edit'?12:24">
                        <a-button @click="showTypeGroup('')" block>全部商品</a-button>
                    </a-col>
                    <a-col v-if="oper=='edit'" :span="24">
                        <a-button @click="myManageList()" type="primary" ghost block style="margin-top:10px;">自建商品导入</a-button>
                    </a-col>
                </a-row>
            </div>
        </a-col>
        <a-col :span="20">
            <div :id="'typeGoodsList'+key"></div>
        </a-col>
    </a-row>
	`,
	props: ['localeZh','param','parentVue'],
	data:function(){
		return {
			listV3:null,
			storeTypeOid:'',
			map:{},
			oper:'',
			allType:[]
		};
	},
	mounted(){
	    this.oper=this.param.oper||'view';
		this.loadAllType();
		this.showTypeGroup('');
	},
	methods:{
        pageFocus:function(){
            this.$nextTick(function(){
                let el=this.$.refs['typeDiv'];
                if(el){
                    let h=window.innerHeight-this.gap4Top(el)-15-16-32;
                    el.style.maxHeight=h+"px";
                }
            }.bind(this));
        },
		showTypeGroup:function(storeTypeOid){
			this.storeTypeOid=storeTypeOid;
			if(this.listV3) this.listV3.unmount();
			this.loadPage("typeGoodsList"+this.key,
				"action/store/storeGoods/storeGoodsList",
				{params:{"storeType.oid":storeTypeOid,"oper":this.oper}},
				function(pv,v3){
					this.listV3=v3;
		        }.bind(this)
	        );
		},
		loadAllType:function(){
			this.requestData("action/store/storeType/getAllType",
				{},
				function(json){
					if(json.code==0){
					    this.allType=json.list;
					}
                }.bind(this)
            );
		},
		addType:function(){
			this.openPage("action/store/storeType/toEdit",
				{model:{}},
				function(flag,obj){
					if(flag){
						this.loadAllType();
					}
		        }.bind(this),
		        '500px'
	        );
		},
		modType:function(oid){
			this.openPage("action/store/storeType/toEdit",
				{model:{oid:oid}},
				function(flag,obj){
					if(flag){
						this.loadAllType();
					}
		        }.bind(this),
		        '500px'
	        );
		},
		myManageList:function(){
			this.openPage("action/store/storeGoods/myManageList",
				{model:{}},
				function(flag,obj){
					if(flag){
		                this.showTypeGroup(this.storeTypeOid);
					}
		        }.bind(this),
		        '1000px'
	        );
		}
	}
}